<template>
	<view class="container yticon">
		<babyInfo v-if="babyInfoShow" style="width: 100%;" :type="infoType" :days="days" :weeks="weeks" :dueDay="dueDay"
		 :years="years" :month="month" :birthDays="birthDays" :loginType="loginType" @emintAuthStatus="emintAuthStatus()"></babyInfo>
		<!-- 项目选择 -->
		<view class="but-list">
			<view class="cu-list menu-avatar">
				<view class="cu-bar bg-white">
					<view class="action">
						项目选择
					</view>
				</view>
				<view class="cu-item" v-for="(item,index) in projectList" :key="index">
					<view class="cu-avatar radius lg" :style="{'background-image':`url(${item.projectPicture})`}"></view>
					<view class="content">
						<view class="text-pink project-title">
							<view class="text-cut-title">{{item.experimentCodeName}}</view>
							<view class="text-gray text-sm brief">{{item.brief}}</view>
						</view>
						<view class="text-gray text-sm" style="margin: 1.5vh 0;">
							<view class="text-cut-size flex">
								<view class="price-size">
									<span>￥</span>
									<span style="font-size: 4vw;">{{item.experimentPrice}}</span>
								</view>
								<span class="text-cut-but flex" @click="loginType == false ? authStatus = false : clickProject(item)">点击选择
									<span class="cuIcon-right" style="margin-left: 1vw;"></span>
								</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal sq-modal" :class="authStatus == false?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-start" style="min-height: 6vh !important;">
					<view class="modal-title">
						<view class="title">出生健康管理</view>
						<view class="titles">申请</view>
					</view>
				</view>
				<view class="modal-centent">
					<view class="title">
						获取你的昵称、头像、地区及性别等
					</view>
					<view class="id-card">
						<open-data class="cu-avatar lg radius margin-left" type="userAvatarUrl"></open-data>
						<view class="margin-left user-info">
							<open-data type="userNickName"></open-data>
							<view class="size">
								微信个人信息
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end" style="padding-bottom: 7vh;">
					<view class="action" style="width: 100%;">
						<button class="cu-btn" style="width: 50%;height: 7vh;" @click="authStatus = true">取消</button>
						<button class="cu-btn bg-green margin-left" style="width: 50%;height: 7vh;" open-type="getUserInfo"
						 withCredentials="true" @getuserinfo="clickLogin">允许</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import babyInfo from '@/components/babyInfo/index.vue'
	import homeApi from '@/config/api/home.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			babyInfo
		},
		onShow() {
			// 怀孕
			this.days = uni.getStorageSync('cardInfo').days
			this.weeks = uni.getStorageSync('cardInfo').weeks
			this.dueDay = uni.getStorageSync('cardInfo').dueDay
			// 以出生
			this.years = uni.getStorageSync('cardInfo').years
			this.month = uni.getStorageSync('cardInfo').month
			this.birthDays = uni.getStorageSync('cardInfo').birthDays
			if (uni.getStorageSync('authStatus') == false) {
				uni.hideTabBar()
			}
			if (uni.getStorageSync('userInfo') && uni.getStorageSync('userInfo').userStatus.code == 'EXPECTANT') {
				this.infoType = 1
				this.babyInfoShow = false
				this.babyInfoShow = true
			} else if (uni.getStorageSync('userInfo') && uni.getStorageSync('userInfo').userStatus.code == 'BABY') {
				this.infoType = 0
				this.babyInfoShow = false
				this.babyInfoShow = true
			}
		},
		data() {
			return {
				infoType: 2, // 0:以出生，1：怀孕中，2：没填写信息
				loginType: uni.getStorageSync('loginType'), //false：没登陆
				authStatus: uni.getStorageSync('authStatus'),
				projectList: [],
				days: uni.getStorageSync('cardInfo').days,
				weeks: uni.getStorageSync('cardInfo').weeks,
				dueDay: uni.getStorageSync('cardInfo').dueDay,
				years: uni.getStorageSync('cardInfo').years,
				month: uni.getStorageSync('cardInfo').month,
				birthDays: uni.getStorageSync('cardInfo').birthDays,
				babyInfoShow: true,
			};
		},
		onLoad(option) {
			if (option.scene) {
				uni.setStorageSync('departId', decodeURIComponent(option.scene))
			}
			this.getData()
		},
		methods: {
			...mapMutations(['login']),
			emintAuthStatus(v) {
				this.authStatus = v
			},
			// 点击授权确认
			clickLogin() {
				let that = this;
				uni.login({
					success: function(loginRes) {
						if (loginRes) {
							//获取用户信息
							uni.getUserInfo({
								success: function(infoRes) {
									homeApi.login({
										code: loginRes.code, //临时登录凭证
										rawData: infoRes.rawData, //用户非敏感信息
										signature: infoRes.signature, //签名
										encryptedData: infoRes.encryptedData, //用户敏感信息
										iv: infoRes.iv //解密算法的向量
									}).then(res => {
										// 设置登陆状态
										that.login(res)
										that.authStatus = true
										that.loginType = true
										uni.setStorage({ //缓存用户状态,是否为新用户
											key: 'userNewStatus',
											data: res.login
										})
										uni.showTabBar()
									})
								}
							});
						} else {

						}
					}
				});
			},
			// 获取数据
			getData() {
				homeApi.projectQuery()
					.then(res => {
						this.projectList = res
					})
			},
			// 点击选择
			clickProject(v) {
				let data = Object.assign({}, v)
				let img = data.projectPicture
				data.projectPicture = ''
				uni.navigateTo({
					url: './projectDetails/index?data=' + JSON.stringify(data) + '&img=' + encodeURIComponent(img)
				})
			}
		},
		//发送给朋友
		onShareAppMessage(res) {
			// 此处的distSource为分享者的部分信息，需要传递给其他人
			let departId = uni.getStorageSync('departId');
			return {
				title: '信息录入',
				type: 0,
				path: '/pages/index/index?departId=' + departId,
				imageUrl: '../../static/share.jpg'
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			let departId = uni.getStorageSync('departId');
			return {
				title: '信息录入',
				type: 0,
				query: 'departId=' + departId,
				summary: "",
				imageUrl: '../../static/share.jpg'
			}
		},

	}
</script>

<style lang="less">
	page {
		background: #f5f5f5;
		height: 100%;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.container {
		display: flex;
		align-items: center;
		flex-direction: column;
		position: fixed;
		width: 101%;
		height: 101vh;
		overflow-y: auto;
		overflow-x: hidden;
	}


	// 弹窗样式
	.sq-modal {
		.cu-dialog {
			background-color: #fff;
			border-top-left-radius: 8px !important;
			border-top-right-radius: 8px !important;
			padding: 0 20px;

			.modal-title {
				display: flex;
				align-items: center;

				.title {
					color: #333;
					font-size: 2vh;
					font-weight: bold;
				}

				.titles {
					margin-left: 10px;
					color: #333333;
					font-size: 2.2vh;
				}
			}
		}

		.modal-centent {
			padding-bottom: 7vh;

			.title {
				font-size: 2.2vh;
				font-weight: bold;
				text-align: left;
				margin-bottom: 2vh;
			}

			.id-card {
				border-top: 1px solid #e4e4e4;
				border-bottom: 1px solid #e4e4e4;
				display: flex;
				align-items: center;
				padding: 10px 0;

				.user-info {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;

					.size {
						font-size: 3vw;
						color: #909090;
						margin-top: 0.5vh;
					}
				}
			}
		}
	}


	// 项目列表
	.but-list {
		height: 100vh;
		width: 100%;
		margin-top: 2vh;

		.text-cut-title {
			color: #666 !important;
		}

		.brief {
			height: 0px;
			display: flex;
			align-items: center;
			margin-bottom: 2vh;
		}

		.text-cut-size {
			color: #bb405a !important;

			.price-size {
				.flex;
				flex: 0.3;
				height: 5vh;
			}

			.text-cut-but {
				font-size: 3.5vw;
				// margin-left: 25vw;
				flex: 0.7;
				padding: 0 1.5vh;
				margin-left: 16vw;
				margin-right: 8vw;
				height: 5vh;
				background-color: #61d2d6;
				border-radius: 320rpx;
				color: #fff;
				box-shadow: 1px 2px 2px rgba(26, 26, 26, 0.2);
			}
		}

		.cu-bar {
			min-height: 70rpx;
		}

		.cu-bar::after {
			content: '';
			width: 100%;
			height: 1px;
			position: absolute;
			bottom: 0;
			background-color: #f6f7f9;
		}

		.cu-item {
			height: 250rpx !important;

			.project-title {
				display: flex;
				flex-direction: column !important;
				;
				justify-content: flex-start !important;
				align-items: flex-start !important;
				;
			}
		}

		.cu-avatar.lg {
			width: 220rpx;
			height: 180rpx;
			font-size: 2em;

		}

		.cu-list.menu-avatar>.cu-item .content {
			position: absolute;
			left: 280rpx;
			width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx);
			line-height: 3em;

		}


	}
</style>
